<!-- 银行配置 -->
<template>
  <div style="padding: 10px 20px">
    <div style="display: flex">
      <Button type="primary" @click="onFiling" v-if="unlocking('0102040100')">
        {{ isFiling ? '取消归档' : '确认归档' }}
      </Button>
      <Button type="primary" @click="onExport" v-if="unlocking('0102040300')" style="margin-left: 10px">
        导出Excel
      </Button>
    </div>

    <Tabs type="card" style="margin-top: 10px" v-model="tabName" name="dataTypeFiling" @on-click="onTab">
      <TabPane
        v-for="(tab, idx) in tabs"
        :key="idx"
        :label="tab.tag"
        tab="dataTypeFiling"
        :name="String(idx)"
        :disabled="isEdit"></TabPane>
    </Tabs>
    <Button
      type="primary"
      @click="onEdit()"
      v-if="!isFiling && unlocking('0102040200')"
      :disabled="list.length <= 0">
      {{ isEdit ? '保存' : '编辑' }}
    </Button>
    <Button type="primary" @click="onEdit(true)" v-if="isEdit" style="margin-left: 10px">取消编辑</Button>
    <div v-if="tabType == 1" style="margin-top: 20px">
      <div v-if="isEdit">
        <Input
          v-model="list[0].extend"
          maxlength="500"
          show-word-limit
          type="textarea"
          :rows="5"
          placeholder="请输入其他说明"
          style="width: 100%" />
      </div>
      <div v-else>{{ list.length ? list[0].extend || '-' : '暂无数据' }}</div>
    </div>
    <dt-grid v-else ref="tableRef" :onFetch="onFetch" page />
  </div>
</template>

<script setup>
  import column from './biz/columns'
  import mgr from './biz'
  import { ref, onMounted, nextTick } from 'vue'
  import dt from '@dt/dt'

  const [tabs, tabName, tabType] = [ref([]), ref('0'), ref(0)]
  const tableRef = ref()
  const isFiling = ref()
  const isEdit = ref()
  const list = ref([])

  function onFetch() {
    return Promise.resolve(list.value)
  }

  function load() {
    nextTick(() => {
      tableRef.value?.init(this, new column({ isEdit: isEdit.value, tabType: tabType.value }))
      tableRef.value?.fetch()
    })
  }

  function onTab() {
    let tag = tabs.value[tabName.value].tag
    // tabType 0 可编辑存档管理人 备注 1 可编辑文本 2 可编辑存档管理人
    tabType.value = tag == '其他说明' ? 1 : ['业绩确认表', '结佣单'].indexOf(tag) >= 0 ? 2 : 0
    list.value = tabs.value[tabName.value].contentRespList.map((itm) => ({ ...itm }))
    if (tabType.value != 1) load()
  }

  function onFiling() {
    mgr.filing(!isFiling.value).then((res) => (isFiling.value = !isFiling.value))
  }

  function onExport() {
    mgr.exportList()
  }

  function onEdit(cancel) {
    if (cancel) {
      list.value = tabs.value[tabName.value].contentRespList.map((itm) => ({ ...itm }))
      isEdit.value = false
      load()
    } else if (isEdit.value) {
      list.value.forEach((itm) => {
        itm.extend = itm.extend || ''
      })

      mgr.edit(list.value).then((res) => {
        isEdit.value = false
        update()
      })
    } else {
      isEdit.value = true
      load()
    }
  }

  function update() {
    mgr.list().then((res) => {
      tabs.value = res
      onTab()
    })
  }

  onMounted(() => {
    update()
    mgr.isFiling().then((res) => (isFiling.value = res.isFiling))
  })
</script>
<style lang="scss" scoped></style>
